<script setup>

</script>

<template>
    <div class="video">
        <img class="video-image" src="@/assets/img/video1.webp">
        <div class="video-bottom">
           <div class="video-title-width">
            <p class="video-title">坤 拳 —— 从 未 逢 敌</p>
           </div>
            <div class="video-author">
                <div class="video-author-logo">
                    <div class="video-author-name">up</div>
                    <p>蔡徐坤</p>
                </div>
                <img src="@/assets/img/more.png" alt="">
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.video {
    background-color: white;
    border-radius: 5px;
}

.video-image {
    border-radius: 5px;
    width: 100%;
}

.video-bottom {

    padding: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.video-title-width {
    height: 48px;
}
.video-title {
    color: #18191b;
    width: 100%;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}

.video-author {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: #95999f;
    font-size: 14px;
    .video-author-logo {
        display: flex;
        gap: 5px;
    }
    img {
        width: 20px;

    }
}

.video-author-name {
    font-weight: 600;
    font-size: 10px;
    color: #98999b;
    border-radius: 5px;
    padding: 0 5px;
    border: 1px solid #98999b;
}</style>
